import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const Tree = () => {
  const svgRef = useRef();

  useEffect(() => {
    const fetchData = async () => {
      // 读取.tree文件的内容
      const response = await fetch('./example/GWHBJCB01000000.genome.fasta.treefile');
      const content = await response.text();

      // 解析.tree文件为层次结构数据
      const hierarchyData = parseTreeFile(content);

      // 创建绘图区域
      const svg = d3.select(svgRef.current)
        .append('svg')
        .attr('width', 800)
        .attr('height', 600);

      // 创建树图布局
      const treeLayout = d3.tree().size([500, 500]);

      // 生成树图布局
      const treeData = treeLayout(hierarchyData);

      // 绘制树节点
      svg.selectAll('circle')
        .data(treeData.descendants())
        .enter()
        .append('circle')
        .attr('r', 5)
        .attr('fill', 'steelblue')
        .attr('cx', d => d.y)
        .attr('cy', d => d.x);

      // 绘制树连线
      svg.selectAll('path')
        .data(treeData.links())
        .enter()
        .append('path')
        .attr('fill', 'none')
        .attr('stroke', 'gray')
        .attr('d', d => `M${d.source.y},${d.source.x}L${d.target.y},${d.target.x}`);
    };

    fetchData();
  }, []);

  const parseTreeFile = (content) => {
    // 解析.tree文件的逻辑
    // ...
    // 这里只是一个简单的示例
    // 您需要根据.tree文件的格式进行相应的解析

    const hierarchyData = {
      name: 'Root',
      children: [
        { name: 'Node A' },
        { name: 'Node B' },
        { name: 'Node C' },
        { name: 'Node D' },
      ],
    };

    return d3.hierarchy(hierarchyData);
  };

  return <div ref={svgRef} />;
};

export default Tree;

